Single select (dropdown)

Allows users to select one option from a predefined list

Examples

Usage

Research shows some users find single selects clunky and hard to use. It’s generally best to consider other input options first. Single selects are often overused in Turas forms. Before choosing a component that allows user to make a selection, think about whether a different component would be more user-friendly.

Do:

match the select width to the length of the longest option rather than stretching it to other fields' widths
consider alternative form components like radio buttons for better usability
use a text box with autocomplete if users likely know what they're searching for
use a single select for 5 to 15 options
include a clear, descriptive label beside the single select using the <label> tag
use short, descriptive option labels
provide an instructive placeholder inside the single select, e.g. 'Select NHS Board' rather than '--Please select--'
sort options from the user's perspective, usually alphabetically or numerically, unless another pattern suits better
support keyboard input to select visible options or jump to options starting with a typed letter
use single select when the default option is recommended
group related options with a distinct hierarchy using the <optgroup> tag for easier scanning but don't rely on it for critical info as screen readers may ignore it

Avoid:

using a single select for lists with more than 15 options, instead reduce the number of options or use a text input, autocomplete, or a multi select
using a single select with four or fewer options, instead use stacked radio buttons instead
choosing a single select for data that is highly familiar to users, such as a date of birth
adding functionality to allow the user to select multiple options
starting with a default selection unless at least 80-90% of users are likely to select that value
when you want to emphasise options that have no clear default or recommended value, or when options are unfamiliar and require careful reading
when the user needs to view a clear comparison of their options
using select for navigation unless a form submit button is positioned next to it

References

Gov.UK Design System
Select

Neilson Norman Group
Dropdowns: Design Guidelines

Please correct the errors and try again.

Required fields are marked with an asterisk

Single select


            <turas-select-list asp-for="SingleSelect" asp-items="SingleSelects"></turas-select-list>


            <div class="form-group form-select-list "><label class="control-label   " for="SingleSelect">Single select</label>
<div class="col">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="false" id="SingleSelect" name="SingleSelect"><option value="">Select dropdown label</option>
<option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
<option value="7">List item 7</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="SingleSelect" data-valmsg-replace="true"></span>
</div>

Single select required


            <turas-select-list asp-for="SingleSelectRequiredSelect" asp-items="SingleSelectRequiredSelects">
            </turas-select-list>


            <div class="form-group form-select-list "><label class="control-label requiredFieldMarker  " for="SingleSelectRequiredSelect">Single select required</label>
<div class="col">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="false" data-val="true" data-val-required="The Single select required field is required." id="SingleSelectRequiredSelect" name="SingleSelectRequiredSelect"><option value="">Select dropdown label</option>
<option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="SingleSelectRequiredSelect" data-valmsg-replace="true"></span>
</div>

Single select guidance text

I am some guidance text


            <turas-select-list asp-for="SingleSelectGuidanceTextSelect" asp-items="SingleSelectGuidanceTextSelects" guidance-text="I am some guidance text">
            </turas-select-list>


            <div class="form-group form-select-list "><label class="control-label requiredFieldMarker  " for="SingleSelectGuidanceTextSelect">Single select guidance text</label>
<div class="form-field-guidance-text">I am some guidance text</div>
<div class="col">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="false" data-val="true" data-val-required="The Single select guidance text field is required." id="SingleSelectGuidanceTextSelect" name="SingleSelectGuidanceTextSelect"><option value="">Select dropdown label</option>
<option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="SingleSelectGuidanceTextSelect" data-valmsg-replace="true"></span>
</div>

Single select guidance text accordion

A paragraph.

List item
List item
List item


                <turas-select-list asp-for="SingleSelectGuidanceTextAccordionSelect" asp-items="SingleSelectGuidanceTextAccordionSelects">

                    <turas-form-guidance collapses>
                        <p>A paragraph.</p>
                        <ul>
                            <li>List item</li>
                            <li>List item</li>
                            <li>List item</li>
                        </ul>
                    </turas-form-guidance>

                </turas-select-list>


                <div class="form-group form-select-list "><label class="control-label requiredFieldMarker  " for="SingleSelectGuidanceTextAccordionSelect">Single select guidance text accordion</label>
<div class="turas-form-guidance-collapse">
            <button class="turas-form-guidance-collapse-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-7c2aa21b-659c-431f-ade3-588a58031889" aria-expanded="false" aria-controls="collapse-7c2aa21b-659c-431f-ade3-588a58031889"><span class="visually-hidden">Guidance</span></button>              
            <div class="turas-form-guidance-collapse-content collapse" id="collapse-7c2aa21b-659c-431f-ade3-588a58031889">   
                <div class="form-field-guidance-text"><span class=""></span>
                    
                        <p>A paragraph.</p>
                        <ul>
                            <li>List item</li>
                            <li>List item</li>
                            <li>List item</li>
                        </ul>
                       
                </div>
            </div></div>
<div class="col">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="false" data-val="true" data-val-required="The Single select guidance text accordion field is required." id="SingleSelectGuidanceTextAccordionSelect" name="SingleSelectGuidanceTextAccordionSelect"><option value="">Select dropdown label</option>
<option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="SingleSelectGuidanceTextAccordionSelect" data-valmsg-replace="true"></span>
</div>

Single select with search


            <turas-select-list asp-for="SingleSelectWithLiveSearch" asp-items="SingleSelectWithLiveSearchs" live-search>
            
            </turas-select-list>


            <div class="form-group form-select-list "><label class="control-label requiredFieldMarker  " for="SingleSelectWithLiveSearch">Single select with search</label>
<div class="col">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="true" data-val="true" data-val-required="The Single select with search field is required." id="SingleSelectWithLiveSearch" name="SingleSelectWithLiveSearch"><option value="">Select dropdown label</option>
<option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="SingleSelectWithLiveSearch" data-valmsg-replace="true"></span>
</div>

Single select form field width


            <turas-select-list asp-for="SingleSelectFormFieldWidth" asp-items="SingleSelectFormFieldWidths" field-column-widths="col-md-4">

            </turas-select-list>


            <div class="form-group form-select-list "><label class="control-label requiredFieldMarker  " for="SingleSelectFormFieldWidth">Single select form field width</label>
<div class="col-md-4">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="false" data-val="true" data-val-required="The Single select form field width field is required." id="SingleSelectFormFieldWidth" name="SingleSelectFormFieldWidth"><option value="">Select dropdown label</option>
<option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="SingleSelectFormFieldWidth" data-valmsg-replace="true"></span>
</div>

Single select additional classes


                <turas-select-list asp-for="SingleSelectAdditionalClasses" asp-items="SingleSelectAdditionalClassess" additional-classes="mt-10">

                </turas-select-list>


                <div class="form-group form-select-list mt-10"><label class="control-label   " for="SingleSelectAdditionalClasses">Single select additional classes</label>
<div class="col">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="false" id="SingleSelectAdditionalClasses" name="SingleSelectAdditionalClasses"><option value="">Select dropdown label</option>
<option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="SingleSelectAdditionalClasses" data-valmsg-replace="true"></span>
</div>

Single select in a row

Single select in a row


            <div class="row">
                <div class="col-md-6">
                    <turas-select-list asp-for="SingleSelectInARowOne" asp-items="SingleSelectInARowOnes">

                    </turas-select-list>
                </div>
                <div class="col-md-6">
                    <turas-select-list asp-for="SingleSelectInArowRowTwo" asp-items="SingleSelectInARowTwos">

                    </turas-select-list>
                </div>
            </div>


            <div class="row">
                <div class="col-md-6">
                    <div class="form-group form-select-list "><label class="control-label   " for="SingleSelectInARowOne">Single select in a row</label>
<div class="col">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="false" id="SingleSelectInARowOne" name="SingleSelectInARowOne"><option value="">Select dropdown label</option>
<option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="SingleSelectInARowOne" data-valmsg-replace="true"></span>
</div>
                </div>
                <div class="col-md-6">
                    <div class="form-group form-select-list "><label class="control-label   " for="SingleSelectInArowRowTwo">Single select in a row</label>
<div class="col">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="false" id="SingleSelectInArowRowTwo" name="SingleSelectInArowRowTwo"><option value="">Select dropdown label</option>
<option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="SingleSelectInArowRowTwo" data-valmsg-replace="true"></span>
</div>
                </div>
            </div>

Single select in a row required

Single select in a row required


                <div class="row">
                    <div class="col-md-6">
                        <turas-select-list asp-for="SingleSelectRequiredInARowOne" asp-items="SingleSelectRequiredInARowOnes">

                        </turas-select-list>
                    </div>
                    <div class="col-md-6">
                        <turas-select-list asp-for="SingleSelectRequiredInArowRowTwo" asp-items="SingleSelectRequiredInARowTwos">

                        </turas-select-list>
                    </div>
                </div>


                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group form-select-list "><label class="control-label requiredFieldMarker  " for="SingleSelectRequiredInARowOne">Single select in a row required</label>
<div class="col">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="false" data-val="true" data-val-required="The Single select in a row required field is required." id="SingleSelectRequiredInARowOne" name="SingleSelectRequiredInARowOne"><option value="">Select dropdown label</option>
<option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="SingleSelectRequiredInARowOne" data-valmsg-replace="true"></span>
</div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group form-select-list "><label class="control-label requiredFieldMarker  " for="SingleSelectRequiredInArowRowTwo">Single select in a row required</label>
<div class="col">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="false" data-val="true" data-val-required="The Single select in a row required field is required." id="SingleSelectRequiredInArowRowTwo" name="SingleSelectRequiredInArowRowTwo"><option value="">Select dropdown label</option>
<option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="SingleSelectRequiredInArowRowTwo" data-valmsg-replace="true"></span>
</div>
                    </div>
                </div>

Single select required hide validation message


                <turas-select-list asp-for="SingleSelectRequiredHideValidationMessage" asp-items="SingleSelectRequiredHideValidationMessages" hide-validation-message>
                </turas-select-list>


                <div class="form-group form-select-list "><label class="control-label requiredFieldMarker  " for="SingleSelectRequiredHideValidationMessage">Single select required hide validation message</label>
<div class="col">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="false" data-val="true" data-val-required="The Single select required hide validation message field is required." id="SingleSelectRequiredHideValidationMessage" name="SingleSelectRequiredHideValidationMessage"><option value="">Select dropdown label</option>
<option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>

</div>

Single select disabled


                <turas-select-list asp-for="SingleSelectDisabled" asp-items="SingleSelectsDisabled" asp-is-disabled="True"></turas-select-list>


                <div class="form-group form-select-list "><label class="control-label   " for="SingleSelectDisabled">Single select disabled</label>
<div class="col">
<select class="form-control turas-select2" disabled="disabled" turas-select2-close-on-select="true" turas-select2-live-search="false" id="SingleSelectDisabled" name="SingleSelectDisabled"><option value="">Select dropdown label</option>
<option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
<option value="7">List item 7</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="SingleSelectDisabled" data-valmsg-replace="true"></span>
</div>

Single select hide label


                <turas-select-list asp-for="SingleSelectHiddenLabel" asp-items="SingleSelectsHiddenLabels" hide-label></turas-select-list>


                <div class="form-group form-select-list "><label class="control-label   sr-only" for="SingleSelectHiddenLabel">Single select with hidden label</label>
<div class="col">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="false" id="SingleSelectHiddenLabel" name="SingleSelectHiddenLabel"><option value="">Select dropdown label</option>
<option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
<option value="7">List item 7</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="SingleSelectHiddenLabel" data-valmsg-replace="true"></span>
</div>

Parameters for turas-select-list

asp-for - binds the select list to a model property
asp-items - specifies the items to be displayed in the select list
guidance-text - provides additional guidance for the user
live-search - enables a live search feature within the select list
field-column-widths - sets the column width for the select list
additional-classes - allows for additional CSS classes to be applied
hide-validation-message - suppresses validation messages for the select list
asp-is-disabled - disables the select list, making it unselectable
hide-label - hides the label for the select list

Testing

Check that the single select:

can be navigated with keyboard only
shows a visible focus state on the control and selected options
expanded/collapsed state of the dropdown is communicated correctly to screen readers
announces the label, role, available options and selected options correctly with screen readers
hint text or instructions are read out by screen readers
check error messages are announced by screen readers and associated with the multi select
does not trigger unexpected changes while an option is selected
remains usable at 400% zoom and supports reflow without horizontal scrolling
makes it clear when selecting an option will reveal additional fields
make sure opening the option list does not create a keyboard trap

Developer considerations

When using the single select component in your form:

always use the native <select> element where possible
always provide a visible label using <label for=""> and an ID
include a default empty option where appropriate (for example, “Select a country”)
make sure the single select has a programmatic name (via label or aria-labelledby)
use aria-describedby to associate hint text and error messages with the single select
avoid pre-selecting options unless there is a clear user benefit and it does not create a risk of unintended choices
make sure custom select components maintain native select behaviour
write error messages that explain what went wrong and how to fix it
make sure a visible focus state that meets contrast requirements
make sure the component remains usable when text is resized and content reflows
make sure sufficient touch target size and spacing, with a target size of at least 24 × 24 CSS pixels

Required fields

If your form contains fields that users must complete:

clearly indicate when the single select is required by using a visual indicator such as an asterisk
do not rely on the visual indicator alone (for example, an asterisk) to communicate that a field is required and include the help text “Required fields are marked with an asterisk *” at the top of every page of the form
make sure the required state of the single select is programmatically available to assistive technologies using aria-required="true"

Conditional behaviour

If your single select reveals additional content based on a user's selection:

only reveal content when it is logically dependent on the selection
do not automatically move focus when content is revealed
place revealed content directly after the single select that controls it in the DOM
hide the content from all users, including assistive technology users, until it is needed
make sure hidden fields are not focusable
when revealed, make sure the content is reachable in the natural tab order
consider adding hint text to explain that additional fields may appear
use the Turas conditional reveal pattern so the new content is available to screen readers

Previous

Radio buttons

Next

Text box

Was this page helpful?